<template>
  <div class="history-lesson">
    <div class="lesson-item" v-for="(item, index) in list" :key="index">
      <div class="lesson-item-header" :class="{'is_first': index === 0}">
        <div class="lesson-title">
          <span>第{{filterNum(list.length - index )}}讲</span>
          <span>{{item.timeName}}</span>
        </div>
        <div class="lesson-date">
          <span>上课时间:</span>
          {{item.classTime}}
        </div>
      </div>
      <div class="lesson-item-content">
        <div class="score-container">
          <div class="score-item">
            <div>进门考平均分</div>
            <div>
              <span>{{item.entranceScore || 0}}</span>
              <img src="/src/assets/myStudent/score-up.png" alt />
            </div>
          </div>
          <div class="score-item">
            <div>课堂练习平均分</div>
            <div>
              <span>{{item.practiceScore || 0}}</span>
              <img src="/src/assets/myStudent/score-up.png" alt />
            </div>
          </div>
          <div class="score-item">
            <div>作业平均分</div>
            <div>
              <span>{{item.lastHomeworkScore || 0}}</span>
              <img src="/src/assets/myStudent/score-up.png" alt />
            </div>
          </div>
          <div class="score-item">
            <div>本节课错题数</div>
            <div>
              <span>{{item.currentCount || 0}}</span>
              <img src="/src/assets/myStudent/score-up.png" alt />
            </div>
          </div>
          <!-- <div class="score-item">
            <div>累计错题数</div>
            <div>
              <span>{{item.wrongTopicTotal || 0}}</span>
              <img src="/src/assets/myStudent/score-up.png" alt />
            </div>
          </div>-->
        </div>
        <div class="module-title">
          <img src="/src/assets/myStudent/summary-icon.png" alt />
          <span>课堂小结</span>
        </div>
        <div class="module-content content-comment">
          <div class="lesson-comment-item">
            <div style="width: 12px; height: 12px; background: #72b22a;"></div>
            <span class="comment-label">出勤情况:</span>
            <span class="comment-value">{{['提前到', '准时', '迟到', '缺勤'][item.attendance - 1] || '' }}</span>
          </div>
          <div class="lesson-comment-item">
            <div style="width: 12px; height: 12px; background: #FF6B69;"></div>
            <span class="comment-label">听课状态:</span>
            <span class="comment-value">{{['优秀', '良好', '一般'][item.listenState - 1] || '' }}</span>
          </div>
          <div class="lesson-comment-item">
            <div style="width: 12px; height: 12px; background: #F9BB41;"></div>
            <span class="comment-label">上节课作业:</span>
            <span class="comment-value">{{['完成', '部分完成', '未完成'][item.lastHomework - 1] || '' }}</span>
          </div>
          <div class="lesson-comment-item">
            <div style="width: 12px; height: 12px; background: #949AED;"></div>
            <span class="comment-label">出门清:</span>
            <span class="comment-value">{{['优秀', '良好', '一般'][item.outState - 1] || '' }}</span>
          </div>
        </div>
        <div class="module-title">
          <img src="/src/assets/myStudent/comment-icon.png" alt />
          <span>个性点评</span>
        </div>
        <div class="module-content" v-html="item.comment"></div>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref } from 'vue'
import { toChinesNum } from '@/views/test-paper/update/utils'
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  setup() {
    const filterNum = (val) => {
      return toChinesNum(val)
    }
    return { filterNum }
  },
}
</script>

<style scoped lang="scss">
.history-lesson {
  height: 100%;
  background: #ffffff;
  padding: 30px;
  overflow-y: auto;
  .lesson-item {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #dee4f1;
    margin-bottom: 20px;
    .lesson-item-header {
      padding: 15px 20px;
      background: linear-gradient(180deg, #fff9ed 0%, #ffffff 100%);
      border-radius: 10px 10px 0px 0px;
      position: relative;
      .lesson-title {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9f6e0c;
        > span {
          margin-right: 10px;
        }
      }
      .lesson-date {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9f6e0c;
        margin-top: 10px;
        > span {
          margin-right: 10px;
        }
      }
      &::after {
        content: '';
        background: rgba(250, 173, 20, 0.3);
        filter: blur(36px);
        position: absolute;
        left: 0;
        top: 0;
        width: 117px;
        height: 37px;
      }
      &::before {
        content: '';
        background: rgba(250, 173, 20, 0.3);
        filter: blur(36px);
        position: absolute;
        right: 0;
        top: 0;
        width: 117px;
        height: 37px;
      }
    }
    .lesson-item-content {
      padding: 0 20px 30px 20px;
      .score-container {
        // display: grid;
        padding: 23px 40px;
        // grid-template: auto / repeat(4, calc((100% - 348px) / 4));
        // grid-gap: 87px;
        display: flex;
        justify-content: space-around;
        .score-item {
          display: flex;
          justify-content: center;
          flex-direction: column;
          > span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
          }
          > div {
            display: flex;
            justify-content: center;
            align-items: center;
            > span {
              font-size: 30px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
            > img {
              height: 16px;
              width: 10px;
              margin-left: 10px;
            }
          }
        }
      }
      .module-title {
        > img {
          width: 24px;
          height: 19px;
        }
        > span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-left: 8px;
        }
      }
      .content-comment {
        display: flex;
        justify-content: space-around;
      }
      .module-content {
        background: #f5f9fd;
        border-radius: 6px;
        padding: 12px 32px;
        margin: 12px 0;
        > :nth-last-child(1) {
          margin-right: 0;
        }
        .lesson-comment-item {
          display: flex;
          align-items: center;
          padding: 0 20px;
          .comment-label {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #666666;
            margin: 0 5px;
            white-space: nowrap;
          }
          .comment-value {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
